<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="goBack()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
        pullingText="下拉刷新"
        refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list *ngIf="dataList && dataList.length > 0;else nullBlock">
    <ion-item [detail]="isAll" *ngFor="let data of dataList" (click)="pushDetail(data)">
      <ion-label>
        <h5 class="color-orange">{{data.amount | number:'.2-2'}}元</h5>
        <p *ngIf="!!data.fee" class="fee">手续费{{data.fee | number:'.2-2'}}元</p>
      </ion-label>
      <div slot="end" text-right class="right-content">
        <span>{{isAll ? data.summary : data.status}}</span>
        <span class="color-gray">{{data.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
      </div>
    </ion-item>
  </ion-list>
  <ng-template #nullBlock>
    <ion-list>
      <ion-item><ion-label>没有相关记录</ion-label></ion-item>
    </ion-list>
  </ng-template>

  <ion-infinite-scroll #infiniteScroll threshold="50px" (ionInfinite)="loadMoreData($event)">
    <ion-infinite-scroll-content
        loadingText="加载中...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
